<template>
  <div>
    <el-row class="p-d b-f header">
      <el-page-header @back="goBack()" :content="`专家信息`">
      </el-page-header>
      <el-button size="small" type="primary" class="saveBtn" @click="handleEdit">修改</el-button>
    </el-row>
    <div class="content">
      <div class="box">
        <div class="head m-b">基本信息</div>
        <div class="info_box">
          <el-row>
            <el-col :span="21">
              <el-row :gutter="20" class="item_box">
                <el-col :span="9">
                  <span class="text_lable">专家姓名：</span>{{
                    userInfo.talentsName ? userInfo.talentsName : "暂无数据"
                  }}</el-col>
                <el-col :span="7"><span class="text_lable">性别：</span>{{ userInfo.talentsSex }}</el-col>
                <el-col :span="8"><span class="text_lable">移动电话：</span>{{
                  userInfo.talentsPhone ? userInfo.talentsPhone : "暂无数据"
                }}</el-col>
              </el-row>
              <el-row :gutter="20" class="item_box">
                <el-col :span="9"><span class="text_lable">技术职称：</span>{{
                  userInfo.jobTitle ? userInfo.jobTitle : "暂无数据"
                }}</el-col>
                <el-col :span="7"><span class="text_lable">职业方向：</span>{{
                  userInfo.careerDirection
                    ? userInfo.careerDirection
                    : "暂无数据"
                }}</el-col>
              </el-row>
              <el-row :gutter="20" class="item_box">
                <el-col :span="9" class="item_box1"><span class="text_lable">标签：</span>
                  {{
                  userInfo.label
                    ? userInfo.label
                    : "暂无数据"
                }}
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="3" style="text-align: right">
              <div @click="handleEdit">
                <i class="el-icon-edit" style="color: #409eff; font-size: 18px; cursor: pointer" />&nbsp;
                <el-button type="text" style="font-size: 18px">修改</el-button>
              </div>
            </el-col> -->
          </el-row>
        </div>
      </div>
      <div class="box m-t" style="margin-top:50px">
        <div class="head m-b">个人经历</div>
        <div class="experience_box">
          <el-row :gutter="20" class="item_box">
            <el-col :span="24"><span
                class="lable_text">科研学术兼职情况：</span>{{ userInfo.talentExperience&&userInfo.talentExperience.partTimeSituation ||'暂未填写'}} </el-col>
          </el-row>
          <el-row :gutter="20" class="item_box">
            <el-col :span="24"><span
                class="lable_text">受教育情况：</span>{{ userInfo.talentExperience&&userInfo.talentExperience.educationalSituation ||'暂未填写'}} </el-col>
          </el-row>
          <el-row :gutter="20" class="item_box">
            <el-col :span="24"><span class="lable_text">主要工作简历：</span>{{ userInfo.talentExperience&&userInfo.talentExperience.jobResume ||'暂未填写'}}
            </el-col>
          </el-row>
          <el-row :gutter="20" class="item_box">
            <el-col :span="24"><span class="lable_text">著作情况：</span>{{ userInfo.talentExperience&&userInfo.talentExperience.workSituation ||'暂未填写'}}
            </el-col>
          </el-row>
          <el-row :gutter="20" class="item_box">
            <el-col :span="24"><span class="lable_text">主要科研成绩：</span>{{ userInfo.talentExperience&&userInfo.talentExperience.scienceGrade ||'暂未填写'}}
            </el-col>
          </el-row>
          <el-row :gutter="20" class="item_box">
            <el-col :span="24"><span class="lable_text">专利资料：</span>{{ userInfo.talentExperience&&userInfo.talentExperience.patentData ||'暂未填写'}}
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <AddExpert ref="addExperts" />
  </div>
</template>

<script>

import AddExpert from './common/addExpert.vue'
export default {
  components: { AddExpert },
  data() {
    return {
      userInfo: {},
      tag: [],
      tableData: [],
      userPortrait: [],
      talentsId: null,
      searchMsg: [],
      info: ''
    }
  },
  created() {
    this.talentsId = this.$route.query.talentsId

  },
  methods: {
    // 修改
    handleEdit() {
      this.$refs.addExperts.show({
        title: '修改专家基本信息',
        isEdit: true,
        data: {
          talentsType: '专家',
          ...this.userInfo
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
  }
}
</script>

<style lang="less" scoped>
  .header {
    width: 100%;
    height: 50px;
    margin-top: 2px;
    padding-left: 25px;
    background-color: #fff;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #000000;

    .icon-back {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .content {
    background-color: #fff;
    margin: 20px 25px;
    padding: 30px;
    font-size: 16px;
    height: 80vh;

    .box {
      margin-bottom: 20px;
    }

    .head {
      border-left: 6px solid #5272ec;
      padding-left: 15px;
      font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
    }

    .info_box {
      margin: 15px 6px;
      padding: 0 20px;
      border: 1px solid #5272ec;
      border-radius: 14px;
      .item_box {
        margin: 20px 0;
        .item_box1 {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
        }
        .text_lable {
          font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
          font-weight: 700;
          white-space: nowrap;
        }
        .tag_box {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: wrap;
        }

        .tag {
          margin: 0 10px 5px 0;
          padding: 0 5px;
          border: 1px solid #5272ec;
          border-radius: 3px;
          height: 29px;
          line-height: 29px;
          text-align: center;
          color: #5272ec;
          font-family: 'ArialMT', 'Arial', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 16px;
          letter-spacing: normal;
        }
      }
    }
    .experience_box {
      margin: 15px 6px;
      padding: 0 20px;
      border: 1px solid #5272ec;
      border-radius: 14px;
      .item_box {
        margin: 20px 0;
        .lable_text {
          font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
          font-weight: 700;
          white-space: nowrap;
        }
        .content_text {
          word-wrap: break-word;
        }
      }
    }

    .table_box {
      margin: 15px 6px;
      /* el-table 列数据为空自动显示 -- */
      // .table :empty::before {
      //   content: "--";
      //   color: gray;
      // }
    }

    .canvas_box {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .header {
    position: relative;
    .saveBtn {
      position: absolute;
      right: 30px;
      top: 10px;
    }
  }
</style>
